<template>
  <view class="load-more-wrap">
    <view class="s-spin-container">
      <view class="iconfont icon-spin icon-loading" v-if="status === 'loading'"></view>
      <view class="s-spin-label">{{ loadText[status] }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'load-more',
  props: {
    // 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
    status: {
      type: String,
      default: 'loadmore',
    },
  },
  data() {
    return {
      loadText: {
        loadmore: '加载更多',
        loading: '加载中...',
        nomore: '没有更多了～',
      },
    };
  },
};
</script>

<style lang="less">
.load-more-wrap {
  .s-spin-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rpx 0 30rpx;
  }
  .s-spin-label {
    font-size: 28rpx;
    color: #ababab;
    margin-left: 8rpx;
  }
  .icon-spin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40rpx;
    height: 40rpx;
    color: #ababab;
    animation: 2s spin linear infinite;
  }
  @keyframes spin {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>